<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能故障诊断与运维平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="./common-styles.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: {
                            100: '#F5F5F5',
                            200: '#E5E5E5',
                            300: '#D4D4D4',
                            400: '#A3A3A3',
                            500: '#737373',
                            600: '#525252',
                            700: '#404040',
                            800: '#262626',
                            900: '#171717',
                        },
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        info: '#1890FF',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    }
                },
            }
        }
    </script>

    </style>
</head>

<body class="font-inter bg-neutral-100 text-neutral-800 min-h-screen flex flex-col">
    <!-- 统一导航菜单 -->
    <nav class="bg-white border-b border-neutral-200 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fa fa-cube text-primary text-xl mr-2"></i>
                        <span class="font-medium text-lg">智能运维平台</span>
                    </div>
                    <div class="hidden sm:ml-6 sm:flex sm:space-x-6">
                        <a href="多模态.html"
                            class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            <i class="fa fa-line-chart mr-1"></i> 多模态评估
                        </a>
                        <a href="聊天助手.html"
                            class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            <i class="fa fa-comment mr-1"></i> 聊天助手
                        </a>
                        <a href="使用率.html"
                            class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            <i class="fa fa-microchip mr-1"></i> 性能监控
                        </a>
                        <a href="ai.html"
                            class="border-primary text-primary inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            <i class="fa fa-bug mr-1"></i> 故障诊断
                        </a>
                        <a href="os运维场景.html"
                            class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            <i class="fa fa-server mr-1"></i> 运维场景
                        </a>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="登录.html"
                        class="text-neutral-500 hover:text-neutral-700 inline-flex items-center px-1 py-1 text-sm font-medium">
                        <i class="fa fa-sign-in mr-1"></i> 登录
                    </a>
                    <a href="注册.html"
                        class="text-neutral-500 hover:text-neutral-700 inline-flex items-center px-1 py-1 text-sm font-medium">
                        <i class="fa fa-user-plus mr-1"></i> 注册
                    </a>
                    <div class="relative">
                        <button type="button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                            <img class="h-8 w-8 rounded-full object-cover" src="https://i.pravatar.cc/150?img=33" alt="用户头像">
                        </button>
                    </div>
                    <button type="button"
                        class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none">
                        <i class="fa fa-cog"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 移动端菜单 -->
        <div class="sm:hidden">
            <div class="pt-2 pb-3 space-y-1">

                <a href="多模态.html"
                    class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                    <i class="fa fa-line-chart mr-1"></i> 多模态评估
                </a>
                <a href="聊天助手.html"
                    class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                    <i class="fa fa-comment mr-1"></i> 聊天助手
                </a>
                <a href="使用率.html"
                    class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                    <i class="fa fa-microchip mr-1"></i> 性能监控
                </a>
                <a href="ai.html"
                    class="bg-primary text-white block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">
                    <i class="fa fa-bug mr-1"></i> 故障诊断
                </a>
                <a href="os运维场景.html"
                    class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                    <i class="fa fa-server mr-1"></i> 运维场景
                </a>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="flex-grow">
        <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <!-- 欢迎区域 -->
            <div
                class="bg-gradient-to-r from-primary to-secondary text-white rounded-xl p-6 mb-8 animate-gradient relative overflow-hidden">
                <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full -ml-24 -mb-24"></div>
                <div class="relative z-10">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                        <div>
                            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-2 text-shadow">智能故障诊断系统</h1>
                            <p class="text-white/90 mb-4">利用AI技术自动识别、分析并解决系统故障，提升运维效率</p>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-3 py-1 bg-white/20 rounded-full text-sm">国产GPU适配</span>
                                <span class="px-3 py-1 bg-white/20 rounded-full text-sm">AI智能分析</span>
                                <span class="px-3 py-1 bg-white/20 rounded-full text-sm">多模态感知</span>
                                <span class="px-3 py-1 bg-white/20 rounded-full text-sm">银河麒麟兼容</span>
                            </div>
                        </div>
                        <div class="mt-4 md:mt-0">
                            <button id="start-diagnosis"
                                class="bg-white text-primary px-5 py-2 rounded-lg font-medium hover:bg-neutral-100 transition-colors flex items-center">
                                <i class="fa fa-microphone mr-2"></i> 开始语音诊断
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 智能搜索区域 -->
            <div class="bg-white rounded-lg shadow-card p-6 mb-8">
                <div class="flex flex-col lg:flex-row gap-4">
                    <div class="flex-grow">
                        <h2 class="text-xl font-semibold mb-4">自然语言诊断</h2>
                        <div class="relative">
                            <input type="text" placeholder="输入您的问题或系统现象..."
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                        </div>
                        <div class="mt-4 flex flex-wrap gap-2">
                            <span class="text-sm text-neutral-500">常用问题:</span>
                            <button
                                class="px-3 py-1 text-xs bg-neutral-100 hover:bg-neutral-200 rounded-full transition-colors">GPU驱动无法加载</button>
                            <button
                                class="px-3 py-1 text-xs bg-neutral-100 hover:bg-neutral-200 rounded-full transition-colors">系统崩溃频繁</button>
                            <button
                                class="px-3 py-1 text-xs bg-neutral-100 hover:bg-neutral-200 rounded-full transition-colors">AI框架运行缓慢</button>
                            <button
                                class="px-3 py-1 text-xs bg-neutral-100 hover:bg-neutral-200 rounded-full transition-colors">内存泄漏</button>
                        </div>
                    </div>
                    <div class="lg:w-64">
                        <h2 class="text-xl font-semibold mb-4">智能助手</h2>
                        <div class="bg-neutral-50 rounded-lg p-4 h-full flex flex-col relative">
                            <div id="chat-container"
                                class="space-y-3 flex-grow max-h-[200px] overflow-y-auto scrollbar-hide">
                                <div class="flex items-start">
                                    <div
                                        class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white flex-shrink-0">
                                        <i class="fa fa-robot"></i>
                                    </div>
                                    <div class="ml-2 bg-white rounded-lg p-3 rounded-tl-none shadow-sm">
                                        <p class="text-sm">您好！有什么可以帮助您的？</p>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 pt-4 border-t border-neutral-200">
                                <div class="flex items-center justify-between">
                                    <button
                                        class="p-2 rounded-full bg-neutral-200 hover:bg-neutral-300 transition-colors">
                                        <i class="fa fa-paperclip text-neutral-600"></i>
                                    </button>
                                    <button
                                        class="p-2 rounded-full bg-neutral-200 hover:bg-neutral-300 transition-colors">
                                        <i class="fa fa-microphone text-neutral-600"></i>
                                    </button>
                                    <button
                                        class="p-2 rounded-full bg-neutral-200 hover:bg-neutral-300 transition-colors">
                                        <i class="fa fa-keyboard-o text-neutral-600"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- 国产GPU和AI框架适配卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div class="bg-white rounded-xl shadow-card p-6 card-hover">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 rounded-lg gpu-card flex items-center justify-center text-white mr-4">
                                <i class="fa fa-microchip text-xl"></i>
                            </div>
                            <div>
                                <h2 class="text-lg font-semibold text-neutral-800">国产GPU适配</h2>
                                <p class="text-sm text-neutral-500">支持多款国产GPU硬件</p>
                            </div>
                        </div>
                        <div class="space-y-3">
                            <div class="flex justify-between items-center">
                                <span class="text-sm">昆仑芯</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">已适配</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">海光</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">已适配</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">兆芯</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">已适配</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">景嘉微</span>
                                <span
                                    class="text-xs font-medium bg-neutral-100 text-neutral-600 px-2 py-0.5 rounded-full">适配中</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">天数智芯</span>
                                <span
                                    class="text-xs font-medium bg-neutral-100 text-neutral-600 px-2 py-0.5 rounded-full">适配中</span>
                            </div>
                        </div>
                        <button
                            class="mt-4 w-full py-2 border border-primary text-primary rounded-lg text-sm font-medium hover:bg-primary/5 transition-colors">
                            查看详细适配信息
                        </button>
                    </div>

                    <div class="bg-white rounded-xl shadow-card p-6 card-hover">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 rounded-lg ai-card flex items-center justify-center text-white mr-4">
                                <i class="fa fa-code-fork text-xl"></i>
                            </div>
                            <div>
                                <h2 class="text-lg font-semibold text-neutral-800">AI框架库支持</h2>
                                <p class="text-sm text-neutral-500">主流AI框架与工具链</p>
                            </div>
                        </div>
                        <div class="space-y-3">
                            <div class="flex justify-between items-center">
                                <span class="text-sm">昇思MindSpore</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">已适配</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">百度飞桨PaddlePaddle</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">已适配</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">PyTorch</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">已适配</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">TensorFlow</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">已适配</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">Keras</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">已适配</span>
                            </div>
                        </div>
                        <button
                            class="mt-4 w-full py-2 border border-primary text-primary rounded-lg text-sm font-medium hover:bg-primary/5 transition-colors">
                            查看框架兼容性报告
                        </button>
                    </div>

                    <div class="bg-white rounded-xl shadow-card p-6 card-hover">
                        <div class="flex items-center mb-4">
                            <div
                                class="w-12 h-12 rounded-lg diagnosis-card flex items-center justify-center text-white mr-4">
                                <i class="fa fa-stethoscope text-xl"></i>
                            </div>
                            <div>
                                <h2 class="text-lg font-semibold text-neutral-800">故障诊断能力</h2>
                                <p class="text-sm text-neutral-500">智能分析与自动修复</p>
                            </div>
                        </div>
                        <div class="space-y-3">
                            <div class="flex justify-between items-center">
                                <span class="text-sm">驱动程序问题</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">可修复</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">硬件兼容性</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">可修复</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">内存泄漏</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">可修复</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">性能瓶颈</span>
                                <span
                                    class="text-xs font-medium bg-success/10 text-success px-2 py-0.5 rounded-full">可优化</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm">系统崩溃</span>
                                <span
                                    class="text-xs font-medium bg-warning/10 text-warning px-2 py-0.5 rounded-full">需人工干预</span>
                            </div>
                        </div>
                        <button
                            class="mt-4 w-full py-2 border border-primary text-primary rounded-lg text-sm font-medium hover:bg-primary/5 transition-colors">
                            运行全面诊断
                        </button>
                    </div>
                </div>

                <!-- AI智能分析卡片 -->
                <div class="bg-white rounded-xl shadow-card p-6 mb-8 relative overflow-hidden">
                    <div class="absolute top-0 right-0 bg-primary/5 w-1/2 h-full rounded-bl-full"></div>
                    <div class="relative z-10">
                        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
                            <div>
                                <h2 class="text-xl font-semibold mb-2">AI智能分析</h2>
                                <p class="text-neutral-600">基于深度学习的系统健康评估与故障预测</p>
                            </div>
                            <div class="mt-4 md:mt-0 flex space-x-3">
                                <button
                                    class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-refresh mr-1"></i> 刷新分析
                                </button>
                                <button
                                    class="px-4 py-2 bg-neutral-100 text-neutral-700 rounded-lg text-sm font-medium hover:bg-neutral-200 transition-colors">
                                    <i class="fa fa-download mr-1"></i> 导出报告
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                            <div class="bg-neutral-50 rounded-lg p-5 card-hover">
                                <div class="flex items-center justify-between mb-4">
                                    <h3 class="text-sm font-semibold text-neutral-600">系统健康指数</h3>
                                    <span
                                        class="text-xs font-medium bg-success/10 text-success px-2.5 py-0.5 rounded-full">良好</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-3xl font-semibold text-neutral-800">96%</p>
                                        <p class="text-sm text-neutral-500">基于AI评估</p>
                                    </div>
                                    <div class="relative w-20 h-20">
                                        <svg class="w-20 h-20 progress-ring" viewBox="0 0 36 36">
                                            <circle cx="18" cy="18" r="16" fill="none" stroke="#E5E5E5"
                                                stroke-width="3" />
                                            <circle cx="18" cy="18" r="16" fill="none" stroke="#00B42A" stroke-width="3"
                                                stroke-dasharray="100" stroke-dashoffset="4" />
                                        </svg>
                                        <div class="absolute inset-0 flex items-center justify-center text-success">
                                            <i class="fa fa-check-circle text-2xl"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-neutral-50 rounded-lg p-5 card-hover">
                                <div class="flex items-center justify-between mb-4">
                                    <h3 class="text-sm font-semibold text-neutral-600">故障预测</h3>
                                    <span
                                        class="text-xs font-medium bg-warning/10 text-warning px-2.5 py-0.5 rounded-full">需关注</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-3xl font-semibold text-neutral-800">3</p>
                                        <p class="text-sm text-neutral-500">潜在风险</p>
                                    </div>
                                    <div class="relative w-20 h-20">
                                        <svg class="w-20 h-20 progress-ring" viewBox="0 0 36 36">
                                            <circle cx="18" cy="18" r="16" fill="none" stroke="#E5E5E5"
                                                stroke-width="3" />
                                            <circle cx="18" cy="18" r="16" fill="none" stroke="#FF7D00" stroke-width="3"
                                                stroke-dasharray="100" stroke-dashoffset="25" />
                                        </svg>
                                        <div class="absolute inset-0 flex items-center justify-center text-warning">
                                            <i class="fa fa-exclamation-triangle text-2xl"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-neutral-50 rounded-lg p-5 card-hover">
                                <div class="flex items-center justify-between mb-4">
                                    <h3 class="text-sm font-semibold text-neutral-600">异常检测</h3>
                                    <span
                                        class="text-xs font-medium bg-danger/10 text-danger px-2.5 py-0.5 rounded-full">需处理</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-3xl font-semibold text-neutral-800">12</p>
                                        <p class="text-sm text-neutral-500">异常事件</p>
                                    </div>
                                    <div class="relative w-20 h-20">
                                        <svg class="w-20 h-20 progress-ring" viewBox="0 0 36 36">
                                            <circle cx="18" cy="18" r="16" fill="none" stroke="#E5E5E5"
                                                stroke-width="3" />
                                            <circle cx="18" cy="18" r="16" fill="none" stroke="#F53F3F" stroke-width="3"
                                                stroke-dasharray="100" stroke-dashoffset="65" />
                                        </svg>
                                        <div class="absolute inset-0 flex items-center justify-center text-danger">
                                            <i class="fa fa-exclamation-circle text-2xl"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-neutral-50 rounded-lg p-5 card-hover">
                                <div class="flex items-center justify-between mb-4">
                                    <h3 class="text-sm font-semibold text-neutral-600">AI模型准确性</h3>
                                    <span
                                        class="text-xs font-medium bg-success/10 text-success px-2.5 py-0.5 rounded-full">优秀</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-3xl font-semibold text-neutral-800">98.7%</p>
                                        <p class="text-sm text-neutral-500">故障识别率</p>
                                    </div>
                                    <div class="relative w-20 h-20">
                                        <svg class="w-20 h-20 progress-ring" viewBox="0 0 36 36">
                                            <circle cx="18" cy="18" r="16" fill="none" stroke="#E5E5E5"
                                                stroke-width="3" />
                                            <circle cx="18" cy="18" r="16" fill="none" stroke="#00B42A" stroke-width="3"
                                                stroke-dasharray="100" stroke-dashoffset="1.3" />
                                        </svg>
                                        <div class="absolute inset-0 flex items-center justify-center text-success">
                                            <i class="fa fa-check-circle text-2xl"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 系统信息和图表区域 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- 左侧列表 -->
                    <div class="lg:col-span-1 space-y-6">
                        <!-- 硬件信息卡片 -->
                        <div class="bg-white rounded-lg shadow-card p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h2 class="text-lg font-semibold text-neutral-800">硬件信息</h2>
                                <button class="text-primary text-sm hover:text-primary/80">
                                    <i class="fa fa-refresh"></i> 刷新
                                </button>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <h3 class="text-sm font-medium text-neutral-800 mb-2">CPU</h3>
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm">型号</span>
                                        <span class="text-sm font-medium">海光 7285 处理器</span>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm">核心数</span>
                                        <span class="text-sm font-medium">32核</span>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm">频率</span>
                                        <span class="text-sm font-medium">3.0GHz</span>
                                    </div>
                                    <div class="mt-2">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>使用率</span>
                                            <span>42%</span>
                                        </div>
                                        <div class="w-full bg-neutral-200 rounded-full h-2">
                                            <div class="bg-primary h-2 rounded-full" style="width: 42%"></div>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <h3 class="text-sm font-medium text-neutral-800 mb-2">GPU</h3>
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm">型号</span>
                                        <span class="text-sm font-medium">昆仑芯 XPU 2</span>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm">显存</span>
                                        <span class="text-sm font-medium">32GB</span>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm">CUDA核心</span>
                                        <span class="text-sm font-medium">8192</span>
                                    </div>
                                    <div class="mt-2">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>使用率</span>
                                            <span>78%</span>
                                        </div>
                                        <div class="w-full bg-neutral-200 rounded-full h-2">
                                            <div class="bg-primary h-2 rounded-full" style="width: 78%"></div>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <h3 class="text-sm font-medium text-neutral-800 mb-2">内存</h3>
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm">总量</span>
                                        <span class="text-sm font-medium">128GB</span>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm">已用</span>
                                        <span class="text-sm font-medium">72GB</span>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm">可用</span>
                                        <span class="text-sm font-medium">56GB</span>
                                    </div>
                                    <div class="mt-2">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>使用率</span>
                                            <span>56%</span>
                                        </div>
                                        <div class="w-full bg-neutral-200 rounded-full h-2">
                                            <div class="bg-primary h-2 rounded-full" style="width: 56%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 最近异常事件卡片 -->
                        <div class="bg-white rounded-lg shadow-card p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h2 class="text-lg font-semibold text-neutral-800">最近异常事件</h2>
                                <button class="text-primary text-sm hover:text-primary/80">
                                    查看全部
                                </button>
                            </div>
                            <div class="space-y-4">
                                <div class="flex items-start p-3 bg-danger/5 rounded-lg border border-danger/20">
                                    <div
                                        class="w-8 h-8 rounded-full bg-danger/10 flex items-center justify-center text-danger mr-3">
                                        <i class="fa fa-exclamation-circle"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-medium">GPU驱动错误</h4>
                                        <p class="text-xs text-neutral-600">昆仑芯XPU驱动版本不兼容，导致训练任务失败</p>
                                        <div class="flex items-center mt-1">
                                            <span class="text-xs text-neutral-500">10分钟前</span>
                                            <span
                                                class="ml-2 px-2 py-0.5 bg-danger/10 text-danger text-xs rounded-full">紧急</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex items-start p-3 bg-warning/5 rounded-lg border border-warning/20">
                                    <div
                                        class="w-8 h-8 rounded-full bg-warning/10 flex items-center justify-center text-warning mr-3">
                                        <i class="fa fa-exclamation-triangle"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-medium">内存使用率过高</h4>
                                        <p class="text-xs text-neutral-600">系统内存使用率持续超过85%，可能导致性能下降</p>
                                        <div class="flex items-center mt-1">
                                            <span class="text-xs text-neutral-500">1小时前</span>
                                            <span
                                                class="ml-2 px-2 py-0.5 bg-warning/10 text-warning text-xs rounded-full">警告</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex items-start p-3 bg-info/5 rounded-lg border border-info/20">
                                    <div
                                        class="w-8 h-8 rounded-full bg-info/10 flex items-center justify-center text-info mr-3">
                                        <i class="fa fa-info-circle"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-medium">AI框架兼容性检查</h4>
                                        <p class="text-xs text-neutral-600">昇思MindSpore版本与当前GPU驱动存在兼容性问题</p>
                                        <div class="flex items-center mt-1">
                                            <span class="text-xs text-neutral-500">3小时前</span>
                                            <span
                                                class="ml-2 px-2 py-0.5 bg-info/10 text-info text-xs rounded-full">信息</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧图表 -->
                    <div class="lg:col-span-2 space-y-6">
                        <!-- 性能监控卡片 -->
                        <div class="bg-white rounded-lg shadow-card p-6">
                            <div class="flex items-center justify-between mb-6">
                                <h2 class="text-lg font-semibold text-neutral-800">系统性能监控</h2>
                                <div class="flex space-x-2">
                                    <button class="px-3 py-1 text-xs bg-primary text-white rounded-full">实时</button>
                                    <button
                                        class="px-3 py-1 text-xs bg-neutral-100 hover:bg-neutral-200 rounded-full transition-colors">1小时</button>
                                    <button
                                        class="px-3 py-1 text-xs bg-neutral-100 hover:bg-neutral-200 rounded-full transition-colors">1天</button>
                                    <button
                                        class="px-3 py-1 text-xs bg-neutral-100 hover:bg-neutral-200 rounded-full transition-colors">1周</button>
                                </div>
                            </div>
                            <div class="h-64">
                                <canvas id="performanceChart"></canvas>
                            </div>
                        </div>

                        <!-- 故障诊断流程卡片 -->
                        <div class="bg-white rounded-lg shadow-card p-6">
                            <div class="flex items-center justify-between mb-6">
                                <h2 class="text-lg font-semibold text-neutral-800">智能诊断流程</h2>
                                <button class="text-primary text-sm hover:text-primary/80">
                                    查看详细报告
                                </button>
                            </div>
                            <div class="relative">
                                <!-- 连接线 -->
                                <div
                                    class="absolute left-6 top-0 bottom-0 w-0.5 bg-neutral-200 transform -translate-x-1/2">
                                </div>

                                <div class="space-y-8">
                                    <div class="relative">
                                        <div
                                            class="absolute left-0 top-0 w-12 h-12 rounded-full bg-success flex items-center justify-center text-white z-10">
                                            <i class="fa fa-check"></i>
                                        </div>
                                        <div class="ml-16">
                                            <h3 class="text-sm font-medium text-neutral-800">数据收集</h3>
                                            <p class="text-xs text-neutral-600 mt-1">已收集系统日志、硬件状态、性能指标等128项数据</p>
                                            <div class="text-xs text-neutral-500 mt-1">完成于 10:23:45</div>
                                        </div>
                                    </div>

                                    <div class="relative">
                                        <div
                                            class="absolute left-0 top-0 w-12 h-12 rounded-full bg-success flex items-center justify-center text-white z-10">
                                            <i class="fa fa-check"></i>
                                        </div>
                                        <div class="ml-16">
                                            <h3 class="text-sm font-medium text-neutral-800">异常检测</h3>
                                            <p class="text-xs text-neutral-600 mt-1">基于深度学习模型，检测到12个异常点，其中3个可能导致系统故障</p>
                                            <div class="text-xs text-neutral-500 mt-1">完成于 10:25:18</div>
                                        </div>
                                    </div>

                                    <div class="relative">
                                        <div
                                            class="absolute left-0 top-0 w-12 h-12 rounded-full bg-success flex items-center justify-center text-white z-10">
                                            <i class="fa fa-check"></i>
                                        </div>
                                        <div class="ml-16">
                                            <h3 class="text-sm font-medium text-neutral-800">根因分析</h3>
                                            <p class="text-xs text-neutral-600 mt-1">
                                                GPU驱动版本不兼容（置信度98.7%），内存分配不合理（置信度76.3%）
                                            </p>
                                            <div class="text-xs text-neutral-500 mt-1">完成于 10:27:32</div>
                                        </div>
                                    </div>

                                    <div class="relative">
                                        <div
                                            class="absolute left-0 top-0 w-12 h-12 rounded-full bg-warning flex items-center justify-center text-white z-10">
                                            <i class="fa fa-cog fa-spin"></i>
                                        </div>
                                        <div class="ml-16">
                                            <h3 class="text-sm font-medium text-neutral-800">修复方案生成</h3>
                                            <p class="text-xs text-neutral-600 mt-1">正在生成最优修复方案，包括驱动更新建议、内存优化策略等</p>
                                            <div class="text-xs text-neutral-500 mt-1">进行中...</div>
                                        </div>
                                    </div>

                                    <div class="relative">
                                        <div
                                            class="absolute left-0 top-0 w-12 h-12 rounded-full bg-neutral-300 flex items-center justify-center text-neutral-500 z-10">
                                            <i class="fa fa-clock-o"></i>
                                        </div>
                                        <div class="ml-16">
                                            <h3 class="text-sm font-medium text-neutral-800">自动化修复</h3>
                                            <p class="text-xs text-neutral-600 mt-1">待用户确认后，将自动执行修复操作并验证修复效果</p>
                                            <div class="text-xs text-neutral-500 mt-1">未开始</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-neutral-200 py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa fa-bug text-primary text-xl mr-2"></i>
                    <span class="font-medium">智能故障诊断平台</span>
                </div>
                <div class="text-sm text-neutral-500">
                    © 2025 智能运维团队. 保留所有权利.
                </div>
                <div class="flex space-x-4 mt-4 md:mt-0">
                    <a href="#" class="text-neutral-500 hover:text-primary">
                        <i class="fa fa-question-circle"></i> 帮助中心
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary">
                        <i class="fa fa-book"></i> 文档
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary">
                        <i class="fa fa-envelope"></i> 联系我们
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 初始化性能图表
        document.addEventListener('DOMContentLoaded', function () {
            const ctx = document.getElementById('performanceChart').getContext('2d');

            const labels = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00'];

            const performanceChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'CPU使用率(%)',
                            data: [30, 25, 28, 35, 42, 38, 45, 50, 48, 55, 60, 42],
                            borderColor: '#0078D7',
                            backgroundColor: 'rgba(0, 120, 215, 0.1)',
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: 'GPU使用率(%)',
                            data: [60, 65, 70, 75, 80, 78, 82, 85, 80, 72, 68, 78],
                            borderColor: '#FF7D00',
                            backgroundColor: 'rgba(255, 125, 0, 0.1)',
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '内存使用率(%)',
                            data: [45, 48, 50, 52, 55, 58, 60, 62, 65, 68, 70, 56],
                            borderColor: '#00B42A',
                            backgroundColor: 'rgba(0, 180, 42, 0.1)',
                            tension: 0.3,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                boxWidth: 12,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            callbacks: {
                                label: function (context) {
                                    return context.dataset.label + ': ' + context.raw + '%';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function (value) {
                                    return value + '%';
                                }
                            }
                        }
                    },
                    interaction: {
                        mode: 'nearest',
                        axis: 'x',
                        intersect: false
                    },
                    animation: {
                        duration: 1000,
                        easing: 'easeOutQuart'
                    }
                }
            });

            // 语音诊断按钮交互
            const diagnosisBtn = document.getElementById('start-diagnosis');
            let isListening = false;

            diagnosisBtn.addEventListener('click', function () {
                isListening = !isListening;

                if (isListening) {
                    diagnosisBtn.innerHTML = '<i class="fa fa-circle-o-notch fa-spin mr-2"></i> 正在聆听...';
                    diagnosisBtn.classList.add('bg-danger', 'text-white');
                    diagnosisBtn.classList.remove('bg-white', 'text-primary');

                    // 模拟语音识别
                    setTimeout(() => {
                        // 添加用户消息到聊天框
                        const chatContainer = document.getElementById('chat-container');
                        const userMessage = document.createElement('div');
                        userMessage.className = 'flex items-start justify-end';
                        userMessage.innerHTML = `
              <div class="mr-2 bg-primary text-white rounded-lg p-3 rounded-tr-none shadow-sm">
                <p class="text-sm">昆仑芯XPU 2在运行ResNet50模型时频繁报错</p>
              </div>
              <div class="h-8 w-8 rounded-full bg-neutral-200 flex items-center justify-center text-neutral-600 flex-shrink-0">
                <i class="fa fa-user"></i>
              </div>
            `;
                        chatContainer.appendChild(userMessage);

                        // 滚动到底部
                        chatContainer.scrollTop = chatContainer.scrollHeight;

                        // 模拟AI响应
                        setTimeout(() => {
                            const aiResponse = document.createElement('div');
                            aiResponse.className = 'flex items-start';
                            aiResponse.innerHTML = `
                <div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white flex-shrink-0">
                  <i class="fa fa-robot"></i>
                </div>
                <div class="ml-2 bg-white rounded-lg p-3 rounded-tl-none shadow-sm">
                  <p class="text-sm">根据您的描述，我分析可能是昆仑芯XPU 2的驱动版本与当前AI框架不兼容导致的。</p>
                  <p class="text-sm mt-1">建议您：</p>
                  <ul class="text-sm mt-1 ml-4 list-disc text-neutral-600">
                    <li>检查并更新昆仑芯XPU驱动至最新版本(3.2.1及以上)</li>
                    <li>确认昇思MindSpore框架版本是否兼容(建议使用2.0.0版本)</li>
                    <li>检查系统内存是否充足，避免内存不足导致的错误</li>
                  </ul>
                </div>
              `;
                            chatContainer.appendChild(aiResponse);

                            // 滚动到底部
                            chatContainer.scrollTop = chatContainer.scrollHeight;

                            // 恢复按钮状态
                            diagnosisBtn.innerHTML = '<i class="fa fa-microphone mr-2"></i> 开始语音诊断';
                            diagnosisBtn.classList.remove('bg-danger', 'text-white');
                            diagnosisBtn.classList.add('bg-white', 'text-primary');
                            isListening = false;
                        }, 2000);
                    }, 1500);
                } else {
                    diagnosisBtn.innerHTML = '<i class="fa fa-microphone mr-2"></i> 开始语音诊断';
                    diagnosisBtn.classList.remove('bg-danger', 'text-white');
                    diagnosisBtn.classList.add('bg-white', 'text-primary');
                }
            });
        });
    </script>
</body>

</html>